<template>
    <div style="margin: 10px;padding: 10px; width: 100%;overflow-y: auto;height: 100%;background-color: #FFF;border-radius: 10px;" class="container">
      <div style="display: inline-block;position:relative;">
      <el-upload
        class="upload-demo"
        drag        
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpload"
        :on-change="uploadExcel"
        :http-request="uploadFile"
        :auto-upload="false" 

        style="display: inline-block;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">导入批次<em>点击上传</em></div>
      </el-upload>
        <!--  -->
        <el-button type="success" @click="handleGet" size="mini" round plain style="position: absolute;top: 7px;left:5px; z-index:999;">下载模版</el-button>
      </div>
      <br>
      <el-button type="primary" @click="addBatch" style="margin-bottom: 5px;">生成批次</el-button>
      <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               :editBtn="true"
               :page="page"
               :upload-after="uploadAfter"
              :upload-delete="uploadDelete"
               @on-load="onload">
               <template slot="status" slot-scope="scope">
                <el-badge v-if="scope.row.status==0" is-dot class="item" style="top: 4px !important;">
                 <el-tag type="danger">
                   未售卖
                 </el-tag>
              </el-badge>
              <el-tag v-if="scope.row.status==1" type="primary">正在售卖</el-tag>
              <el-tag v-if="scope.row.status==2" type="success">售罄</el-tag>
               </template>

               <!-- <template slot="search" slot-scope="scope">
                <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in dt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
               </template> -->

               <template slot-scope="scope" slot="menu">
                <el-button type="primary"
                     icon="el-icon-edit"
                     size="small"
                     plain
                     @click="editBatch(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.status==0" type="success"
                     icon="el-icon-s-shop"
                     size="small"
                     plain
                     @click="takesell(scope.row)">开售</el-button>
                <el-button v-if="scope.row.status==0" type="danger"
                     icon="el-icon-delete"
                     size="small"
                     plain
                     @click="DelBatch(scope.row)">删除</el-button>
               </template>
            </avue-crud>

            <el-dialog class="windowopen" title="生成批次" :visible.sync="dialogFormVisible">
              <div class="card-table">
                 <el-container style="height: 500px; border: 1px solid #eee">
                    <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
                      <el-col :span="10" v-for="(o, index) in vageList" :key="o" class="vagesbox" :class="batchformdata[index].checked?'checkbox':''">
                        <div @click="checked(index)">
                          <el-card :body-style="{ padding: '0px' }" >
                            <div slot="header" class="clearfix" style="text-align: left;">
                                <el-checkbox v-model="batchformdata[index].checked" disabled></el-checkbox>
                                <el-button style="float: right; padding: 3px 0" type="text" :class="batchformdata[index].checked?'textbox':''">種類</el-button>
                            </div>
                            <!-- <img src="http://localhost:8021/img/36d34fbc03ec41f899ad969dfe0623aa.jpg" class="image"> :offset="index > 0 ? 5 : 0" -->
                            <div style="padding: 14px;">
                              <span :class="batchformdata[index].checked?'textbox':''">{{o.vegetables}}</span>
                              <p style="color:#F56C6C" :class="batchformdata[index].checked?'weightbox':''">定裝：{{o.weight}}</p>
                            </div>
                          </el-card>
                        </div>
                      </el-col>
                    </el-aside>
                  <el-container>
                     <el-header style="text-align: right; font-size: 12px">
                        <h1 style="text-align: center;">批次貨物單</h1>
                     </el-header>
                     <el-main id="batchdetail">
                      <el-form v-model="batchform">
                        <el-form-item label="运费:">
                          <el-input v-model="batchform.batchFare" type="number" style="width: 30%;" :min="1" oninput="if(value<0)value=0" placeholder="运费"></el-input>
                          <el-select v-model="batchform.batchPlaceId" placeholder="售卖点" style="margin-left: 5px;">
                            <el-option
                              v-for="item in sellplace"
                              :key="item.placeId"
                              :label="item.placeAreas"
                              :value="item.placeId">
                            </el-option>
                        </el-select>
                        </el-form-item>
                        
                        <el-form-item label="预计时间:">
                          <div class="block">
                          <el-date-picker
                            v-model="batchform.dateTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="发车日期"
                            end-placeholder="抵达日期">
                          </el-date-picker>
                        </div>
                        </el-form-item>
                        
                        

                      </el-form>
                        <el-table :data="batchdetaildata" show-summary="true">
                          <el-table-column
                            prop="vegetables"
                            label="類名">
                          </el-table-column>
                          <el-table-column
                            prop="batchnum"
                            label="數量">
                          </el-table-column>
                          <el-table-column
                            prop="price"
                            label="價格">
                          </el-table-column>
                          <el-table-column
                            fixed="right"
                            label="操作">
                            <template slot-scope="scope">
                              <el-button @click="handleClick(scope.row)" type="button" size="small">编辑</el-button>
                              <el-button @click="delClick(scope.row)" type="button" size="small">刪除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div style="text-align: right;">
                          <el-button type="primary" style="margin-top: 5px;" plain size="small" @click="addBatch">添加批次</el-button>
                        </div>
                     </el-main>

                     <el-main id="vagesMain" style="display:none;">
                      <el-header>
                          <i class="el-icon-back" style="font-size:25px;cursor: pointer;" @click="reblack"></i>
                          <h3 v-if="checkindexIs" style="text-align: center;margin-top: 0px;">{{ vageList[checkindex].vegetables }}</h3>
                      </el-header>
                      <el-form v-model="batchformdata[checkindex]" style="padding-left:10px;">
                        <el-form-item label="數量:">
                          <el-input v-model="batchformdata[checkindex].batchnum" type="number" style="width: 70%;" :min="1" oninput="if(value<0)value=0"></el-input>
                        </el-form-item>

                        <el-form-item label="成本價:">
                          <el-input v-model="batchformdata[checkindex].price" type="number" style="width: 70%;" :min="1" oninput="if(value<0)value=0"></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="text-align:right;width: 85%;" >
                         <el-button type="button" @click="sureAdd">確定</el-button>
                      </div>
                     </el-main>
                  </el-container>
                </el-container> 
                 <!-- <el-table :data="batchData"  
                 @cell-mouse-enter="handleCellEnter"
                 @cell-mouse-leave="handleCellLeave">
                  <el-table-column prop="vegetables" label="分类"></el-table-column>

                  <el-table-column 
                  prop="cartonNum" 
                  label="箱装数量">
                    <template slot-scope="scope" class="item">
                      <el-input v-if="scope.row.isEdit" class="item" v-model="scope.row.cartonNum" placeholder="请输入内容"></el-input>
                      <div v-else class="txt">{{scope.row.cartonNum}}</div>
                    </template>
                  </el-table-column>
                 </el-table>  -->
              </div>

              <!-- <div class="card-box">
                <el-collapse> v-if="scope.row.isEdit" 
              <h3>批次货物:</h3>
              <el-collapse-item v-for="(item,index) in vageList" style="padding-top: 7px;">
                 <template slot="title">
                  <el-checkbox-group v-model="checkVge" style="display: inline-block;">
                       <el-checkbox border :label="item.vegetablesId+'-'+index">{{item.vegetables}}</el-checkbox>
                    </el-checkbox-group>
                 </template>
              <div class="textbox">
                <el-divider style="margin: 0 !important;"></el-divider>

           <el-form :model="formdata[index]" style="padding: 10px;border: 1px solid rgb(204, 204, 204);border-radius: 5px;">
            <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="formdata[index].checked" border>袋装</el-checkbox></h3> 
            <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
              <el-form-item label="袋装售价(元) :">
                  <el-input v-model="formdata[index].baggedPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="袋装库存(袋) :">
                  <el-input v-model="formdata[index].baggedNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="袋装净重量(kg) :">
                  <el-input v-model="formdata[index].baggedWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
            </el-row>

            <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="formdata[index].checked2" border>箱装</el-checkbox></h3>  
            <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
              <el-form-item label="箱装售价(元) :">
                  <el-input v-model="formdata[index].cartonPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item> 
              <el-form-item label="箱装库存(箱) :">
                  <el-input v-model="formdata[index].cartonNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="箱装净重量(kg) :">
                  <el-input v-model="formdata[index].cartonWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item> 
            </el-row>
              <el-form-item label="备注 :" style="margin-top: 20px;">
                <el-input type="textarea" v-model="formdata[index].remark" style="width: 50%;"></el-input>
              </el-form-item>
        </el-form>

              </div>
              </el-collapse-item>
                </el-collapse>
        
                <div class="formbox">
              <h3>批次信息:</h3>
              <el-form :model="batchform">
                <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
              <el-form-item label="批次数量(件) :">
                  <el-input v-model="batchform.batchNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="批次重量(KG) :">
                  <el-input v-model="batchform.batchWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="批次价值(元) :">
                  <el-input v-model="batchform.batchPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="批次车费(元) :">
                  <el-input v-model="batchform.batchFare" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="批次地点:">
                  <el-input v-model="batchform.batchPlace" type="text" style="width: 50%;" ></el-input>
              </el-form-item>
              <el-form-item label="批次用户:">
                <el-select v-model="batchform.batchUserId" placeholder="请选择" style="width: 50%;">
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id" style="padding:10px;">
                  </el-option>
                </el-select> -->
                  <!-- <el-input v-model="batchform.batchUserId" type="number" style="width: 50%;"></el-input> -->
              <!-- </el-form-item>
              <el-form-item label="备注:">
                  <el-input v-model="batchform.remark" type="textarea" style="width: 50%;"></el-input>
              </el-form-item>
            </el-row>
              </el-form>
                </div>
                <el-button type="primary" @click="sureaddBatch">确定</el-button>
              </div> -->
            </el-dialog>


            <el-dialog class="windowopen" title="编辑" :visible.sync="dialogFormVisible2">
              <h2>{{ handleclickedit.vegetables }}</h2>
              <el-form v-model="handleclickedit" style="padding-left:10px;">
                  <el-form-item label="數量:">
                    <el-input v-model="handleclickedit.batchnum" type="number" style="width: 70%;" :min="1" oninput="if(value<0)value=0"></el-input>
                  </el-form-item>

                  <el-form-item label="成本價:">
                    <el-input v-model="handleclickedit.price" type="number" style="width: 70%;" :min="1" oninput="if(value<0)value=0"></el-input>
                  </el-form-item>
              </el-form>
              <div style="text-align:right;width: 85%;" >
                 <el-button type="button" @click="sureEdit">確定</el-button>
              </div>
              <!-- <el-popover trigger="click" popper-class="shopcarmx" placement="bottom-start">
                <el-collapse>
              <h3>批次货物:</h3>
              <el-collapse-item v-for="(item,index) in detailvageList" style="padding-top: 7px;">
                 <template slot="title">
                  <el-checkbox-group v-model="checkVge2" style="display: inline-block;">
                       <el-checkbox border :label="item.vegetablesId+'-'+index">{{item.vegetables}}</el-checkbox>
                    </el-checkbox-group>
                 </template>
              <div class="textbox">
                <el-divider style="margin: 0 !important;"></el-divider>

           <el-form :model="formdata3[index]" style="padding: 10px;border: 1px solid rgb(204, 204, 204);border-radius: 5px;">
            <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="formdata3[index].checked" border>袋装</el-checkbox></h3> 
            <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
              <el-form-item label="袋装售价(元) :">
                  <el-input v-model="formdata3[index].baggedPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="袋装库存(袋) :">
                  <el-input v-model="formdata3[index].baggedNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="袋装净重量(kg) :">
                  <el-input v-model="formdata3[index].baggedWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
            </el-row>

            <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="formdata3[index].checked2" border>箱装</el-checkbox></h3>  
            <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
              <el-form-item label="箱装售价(元) :">
                  <el-input v-model="formdata3[index].cartonPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item> 
              <el-form-item label="箱装库存(箱) :">
                  <el-input v-model="formdata3[index].cartonNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item>
              <el-form-item label="箱装净重量(kg) :">
                  <el-input v-model="formdata3[index].cartonWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
              </el-form-item> 
            </el-row>
              <el-form-item label="备注 :" style="margin-top: 20px;">
                <el-input type="textarea" v-model="formdata3[index].remark" style="width: 50%;"></el-input>
              </el-form-item>
        </el-form>

              </div>
              </el-collapse-item>
                 <el-button style="margin-top: 10px;" type="success" icon="el-icon-check" round plain @click="sureAddvegetables">确认添加</el-button>
                </el-collapse>

                <el-button slot="reference" type="success" plain style="margin-bottom: 10px;" @click="addVegebreed">添加品种</el-button>
              </el-popover>
            
            <el-collapse>
              <el-collapse-item v-for="(item,index) in this.formdata2" style="padding-top: 7px;">
                <template slot="title">
                  {{item.vegetables}}
                  <el-button size="mini" type="danger" round plain icon="el-icon-delete" style="margin-left: 10px;" @click="delvege(item)">移除</el-button>
                 </template>
                    <el-form :model="formdata2[index]"  style="padding: 10px;border: 1px solid rgb(204, 204, 204);border-radius: 5px;">
                        <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="item.checked" border>袋装</el-checkbox></h3> 
                        <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
                          <el-form-item label="袋装售价(元) :">
                              <el-input v-model="item.baggedPrice==-1?'':item.baggedPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="袋装库存(袋) :">
                              <el-input v-model="item.baggedNum==-1?'':item.baggedNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="袋装净重量(kg) :">
                              <el-input v-model="item.baggedWeight==-1?'':item.baggedWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                        </el-row>
            
                        <h3><i class="el-icon-s-fold"></i> <el-checkbox v-model="item.checked2" border>箱装</el-checkbox></h3>  
                        <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
                          <el-form-item label="箱装售价(元) :">
                              <el-input v-model="item.cartonPrice==-1?'':item.cartonPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item> 
                          <el-form-item label="箱装库存(箱) :">
                              <el-input v-model="item.cartonNum==-1?'':item.cartonNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="箱装净重量(kg) :">
                              <el-input v-model="item.cartonWeight==-1?'':item.cartonWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item> 
                        </el-row>
                          <el-form-item label="备注 :" style="margin-top: 20px;">
                            <el-input v-model="item.remark" type="textarea" style="width: 50%;"></el-input>
                          </el-form-item>
                    </el-form>
              </el-collapse-item>
            </el-collapse>
              <el-form v-model="batchform2">
                            <el-row style="border: 1px solid #ccc; padding: 20px;border-radius: 10px;">
                          <el-form-item label="批次数量(件) :">
                              <el-input v-model="batchform2.batchNum" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="批次重量(KG) :">
                              <el-input v-model="batchform2.batchWeight" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="批次价值(元) :">
                              <el-input v-model="batchform2.batchPrice" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="批次车费(元) :">
                              <el-input v-model="batchform2.batchFare" type="number" style="width: 50%;" :min="1" oninput="if(value<0)value=0"></el-input>
                          </el-form-item>
                          <el-form-item label="批次地点:">
                              <el-input v-model="batchform2.batchPlace" type="text" style="width: 50%;"></el-input>
                          </el-form-item>
                          <el-form-item label="批次用户:">
                            <el-select v-model="batchform2.batchUserId" placeholder="请选择" style="width: 50%;">
                              <el-option
                                v-for="item in users"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id" style="padding:10px;">
                              </el-option>
                            </el-select> -->
                          <!-- </el-form-item>
                          <el-form-item label="备注:">
                              <el-input v-model="batchform2.remark" type="textarea" style="width: 50%;"></el-input>
                          </el-form-item>
                          </el-row>
              </el-form>
              <el-button type="primary"
                     icon="el-icon-edit"
                     @click="sureEdit()" style="margin-top: 10px;">确认编辑</el-button> -->
            </el-dialog>

    
    </div>

    

    
</template>

<script>
import {getBatch,getVagelist,insertBatch,getEexcel,uploadBatch,getBatchdetail,getUser,delvegetables,addVagetables,updateBatch,DelBatch,takeSell} from "@/api/system/batch";
import {getList} from '@/api/system/placeAreas';
import {setStore, getStore} from '@/util/store';

export default{
    data(){
        return{
          batchformdata:[],
          batchdetaildata:[],
          checkindex:0,
          checkindexIs:false,
          value:"",
          sellplace:[],
          handleclickedit:{},
          handleclickedel:{},
          dialogFormVisible:false,
          dialogFormVisible2:false,
          addbatchForm:{},
          loading:false,
          batchData:[],
          excelList:[],
          formdata:[],
          formdata2:[],
          formdata3:[],
          batchform:{},
          batchform2:{},
          rowdata:{},
          users:[],
          selectform:{
            userId:parseInt(getStore({name: 'userInfo'}).userId),
            roleId:parseInt(getStore({name: 'userInfo'}).roleId),
            vegetables:""
          },
            vageList:[],
            detailvageList:[],
            checkVge:[],
            checkVge2:[],
            data:[],
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 1
            },
            page2: {
              pageSize: 10,
              currentPage: 1,
              total: 1
            },
            option:{
              searchShow: true,
              searchMenuSpan: 6,
              excelBtn:true,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              addBtn:false,
              editBtn:false,
              delBtn:false,
              showSummary:true,
              sumColumnList:[
            {
              label:"总计:",
              name:"batchFare",
              type:"sum"
            },
            {
              label:"总计:",
              name:"batchNum",
              type:"sum"
            },
            {
              label:"总计:",
              name:"batchWeight",
              type:"sum"
            },
            {
              label:"总计:",
              name:"batchPrice",
              type:"sum"
            },
            {
              label:"总计:",
              name:"batchFare",
              type:"sum"
            }
            ],
              column:[
                {
                    label:"批次号",
                    prop:"batchCode", 
                    search:true
                },
                {
                    label:"车费",
                    prop:"batchFare"
                },
                {
                    label:"批次数量",
                    prop:"batchNum"
                },
                {
                    label:"批次重量",
                    prop:"batchWeight"
                },
                {
                    label:"批次地点",
                    prop:"placeName",
                    type:"select",
                    dicUrl:"/api/blade-system/basicdata/getPlace?isTrue=true",
                    search:true,
                    dictMethod:"get",
                    props:{
                      label:"text",
                      value:"value"
                    }
                },
                {
                    label:"批次用户",
                    prop:"userName"
                },
                {
                    label:"批次价格",
                    prop:"batchPrice"
                },
                {
                    label:"批次车费",
                    prop:"batchFare"
                },
                {
                    label:"生成时间",
                    prop:"batchTime",
                    type:"date",
                    search:true
                },
                {
                    label:"备注",
                    prop:"remark"
                },
                {
                  label:"状态",
                  prop:"status",
                  dicData:[
                     {
                      label:"未开卖",
                      value:0
                     },
                     {
                       label:"已开卖",
                       value:1
                     },
                     {
                       label:"售罄",
                       value:2
                     }
                    ]
                }
              ]
            }
        }
    },
    created(){
      this.vagelist();
      this.getusers();
      this.getplace();
    },
    methods:{
        onload(page, params = {}){
          this.loading = true;
          params["userId"]=this.selectform.userId;
          params["roleId"]=this.selectform.roleId;
          console.log(params);
          getBatch(page.currentPage,page.pageSize,Object.assign(params, this.query)).then(res=>{
            this.loading=false;
            console.log(res);
            if(res.data.code==200){
               this.data = res.data.data.listdt;
               this.page.total = res.data.data.count;
            }else{
               this.$message.error(res.data.data.msg);
            }
          })
        },
        checked(index){
          if(!this.batchformdata[index].checked){
            var tt = document.getElementById("batchdetail");
           tt.style="display:none";
           var tt2 = document.getElementById("vagesMain");
           tt2.style="display:inline-block";
           this.checkindex = index;
           this.checkindexIs = true;
          }
        },
        handleClick(row){
          this.handleclickedit = row;
          this.dialogFormVisible2=true;
            console.log(row); 
        },
        sureEdit(){
           console.log(this.handleclickedit);
           if(this.handleclickedit.batchnum==null || this.handleclickedit.batchnum=='' || this.handleclickedit.batchnum==undefined){
            this.$message.error("請輸入數量");
            return false;
           }
           if(this.handleclickedit.price==null || this.handleclickedit.price=='' || this.handleclickedit.price==undefined){
            this.$message.error("請輸入成本价");
            return false;
           }
           this.batchformdata[this.handleclickedit.key] = this.handleclickedit;
           this.$message.success("修改成功");
           this.dialogFormVisible2=false;
        },
        sureAdd(){
           console.log(this.batchformdata);
           if(this.batchformdata[this.checkindex].batchnum==0 || this.batchformdata[this.checkindex].batchnum==null ||this.batchformdata[this.checkindex].batchnum==undefined){
              this.$message.error("請輸入數量");
              return false;
           }
           this.batchformdata[this.checkindex]["vegetables"] =this.vageList[this.checkindex].vegetables;
           this.batchformdata[this.checkindex].checked = true;
           this.batchdetaildata.push(this.batchformdata[this.checkindex]);
           this.reblack();
           console.log(this.batchdetaildata);
        },
        delClick(row){
          this.$confirm('是否删除,该操作无法撤回').then((status)=>{
            this.batchdetaildata=this.batchdetaildata.filter(function(item,idx){
                return item.key != row.key;
            })
            this.batchformdata[row.key]={
              key:row.key,
              batchnum:0,
              price:0,
              checked:false
            }
            this.$message.success("删除成功");
           })
        },
        reblack(){
           var tt = document.getElementById("batchdetail");
           tt.style="display:inline-block";
           var tt2 = document.getElementById("vagesMain");
           tt2.style="display:none";
        },
        /** 鼠标移入cell */
        handleCellEnter (row, column, cell, event) {
          row.isEdit = true; 
          row.cartonNum = 60;
          console.log(row);
        },
        /** 鼠标移出cell */
        handleCellLeave (row, column, cell, event) {
          row.isEdit = false
        },
        getplace(){
          getList(null,null,{}).then(res=>{
            console.log(res);
            this.sellplace = res.data.data.data;
          })
        },
        DelBatch(row){
           console.log(row);
           this.$confirm('是否删除,该操作无法撤回').then((status)=>{
               DelBatch(row).then(res=>{
               if(res.data.code==200){
                   this.$message.success("删除成功");
                   setTimeout(function(){
                     location.reload();
                   },3000);
                 }else{
                   this.$message.error(res.data.msg);
                 }
              })
           })
        },
        editBatch(row){
          console.log(row);
          this.detailvageList=[];
          this.formdata3=[];
          this.rowdata = row;
           this.dialogFormVisible2 = true;
           var formData = new FormData();
           formData.append("batchcode",row.batchCode);
           formData.append("status",1);
           getBatchdetail(formData).then(res=>{
              this.formdata2=res.data.data.data;
              for(var i=0;i<this.vageList.length;i++){
                var num=0;
                 for(var j=0;j<this.formdata2.length;j++){
                  if(this.vageList[i].vegetablesId != this.formdata2[j].vageId){
                        //console.log(this.vageList[i].vegetablesId+"-"+this.formdata2[j].vageId);
                        num++;
                     }
                 }
                 if(num==this.formdata2.length){
                     this.detailvageList.push(this.vageList[i]);
                     this.formdata3.push({
                       checked:false,
                       checked2:false,
                     })
                 }
              }
              this.batchform2 = row;
           })
        },
        // sureEdit(){
        //    var insertdt=[];
        //    for(var i=0;i<this.formdata2.length;i++){
        //       var dt={};
        //       var arrstr = this.formdata2[i];
        //       console.log(arrstr);
        //       if(!arrstr.checked && !arrstr.checked2){
        //         this.$message.error("请选择货物类型");
        //              return false;
        //       }
        //        if(arrstr.checked){
        //          if(arrstr.baggedPrice==0 || arrstr.baggedWeight==0 || arrstr.baggedNum==0){
        //           this.$message.error("请填写有效数字");
        //           return false;
        //          }
        //        if(arrstr.baggedPrice==null || arrstr.baggedPrice==''){
        //         this.$message.error("请填写完整");
        //         return false;
        //        }
        //        if(arrstr.baggedWeight==null || arrstr.baggedWeight==''){
        //         this.$message.error("请填写完整");
        //         return false;
        //        }
        //        if(arrstr.baggedNum==null || arrstr.baggedNum==''){
        //         this.$message.error("请填写完整");
        //         return false;
        //        }
        //        dt["baggedNum"] = arrstr.baggedNum;
        //        dt["baggedPrice"] = arrstr.baggedPrice;
        //        dt["baggedWeight"] = arrstr.baggedWeight;
        //        dt["checked"]=true;
        //      }
        //      if(arrstr.checked2){
        //       if(arrstr.cartonPrice==0 || arrstr.cartonWeight==0 || arrstr.cartonNum==0){
        //           this.$message.error("请填写有效数字");
        //           return false;
        //          }
        //        if(arrstr.cartonPrice==null || arrstr.cartonPrice==''){
        //          this.$message.error("请填写完整");
        //         return false;
        //        }
        //        if(arrstr.cartonWeight==null || arrstr.cartonWeight==''){
        //          this.$message.error("请填写完整");
        //         return false;
        //        }
        //        if(arrstr.cartonNum==null || arrstr.cartonNum==''){
        //          this.$message.error("请填写完整");
        //         return false;
        //        }
        //        dt["cartonNum"] = arrstr.cartonNum;
        //        dt["cartonPrice"] = arrstr.cartonPrice;
        //        dt["cartonWeight"] = arrstr.cartonWeight;
        //        dt["checked2"]=true;
        //      }
        //      if(dt!={}){
        //        dt["vageId"] = arrstr.vageId;
        //        dt["remark"] = arrstr.remark;
        //        dt["batchDetailId"] = arrstr.batchDetailId;
        //        insertdt.push(dt);
        //      }
        //    }
        //    if(this.batchform2.batchNum==0 || this.batchform2.batchWeight==0 || this.batchform2.batchPrice==0){
        //           this.$message.error("请填写有效数字");
        //           return false;
        //    }
        //    if(this.batchform2.batchNum==null || this.batchform2.batchNum==''){
        //      this.$message.error("请填写完整");
        //      return false;
        //    }
        //    if(this.batchform2.batchWeight==null || this.batchform2.batchWeight==''){
        //     this.$message.error("请填写完整");
        //      return false;
        //    }
        //    if(this.batchform2.batchPrice==null || this.batchform2.batchPrice==''){
        //     this.$message.error("请填写完整");
        //      return false;
        //    }
        //    if(this.batchform2.batchFare==null || this.batchform2.batchFare==''){
        //     this.$message.error("请填写完整");
        //      return false;
        //    }
        //    if(this.batchform2.batchPlace==null || this.batchform2.batchPlace==''){
        //     this.$message.error("请填写完整");
        //      return false;
        //    }
        //    if(this.batchform2.batchUserId==null || this.batchform2.batchUserId==''){
        //     this.$message.error("请填写完整");
        //      return false;
        //    }
        //    var formdata=new FormData();
        //    formdata.append("batchform",JSON.stringify(this.batchform2));
        //    formdata.append("insertdt",JSON.stringify(insertdt));
        //    console.log(this.batchform2);
        //    console.log(insertdt);
        //    updateBatch(formdata).then(res=>{
        //     if(res.data.code==200){
        //         this.$message.success("修改成功");
        //         setTimeout(function(){
        //           location.reload();
        //         },3000);
        //       }else{
        //         this.$message.error(res.data.msg);
        //       }
        //    })
        // },
        sureAddvegetables(){
          console.log(this.formdata3);
          var insertdt=[];
            if(this.checkVge2.length<=0){
              this.$message.error("请选择批次货");
              return false;
           }
           console.log(this.checkVge2);
           for(var i=0;i<this.checkVge2.length;i++){
              var dt={};
              var arrstr = this.checkVge2[i].split("-");
              if(!this.formdata3[arrstr[1]].checked && !this.formdata3[arrstr[1]].checked2){
                this.$message.error("请选择货物类型");
                return false;
              }
              if(this.formdata3[arrstr[1]].checked){
          if(this.formdata3[arrstr[1]].baggedPrice==null || this.formdata3[arrstr[1]].baggedPrice==''){
           this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata3[arrstr[1]].baggedWeight==null || this.formdata3[arrstr[1]].baggedWeight==''){
           this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata3[arrstr[1]].baggedNum==null || this.formdata3[arrstr[1]].baggedNum==''){
           this.$message.error("请填写完整");
           return false;
          }
          dt["baggedNum"] = this.formdata3[arrstr[1]].baggedNum;
          dt["baggedPrice"] = this.formdata3[arrstr[1]].baggedPrice;
          dt["baggedWeight"] = this.formdata3[arrstr[1]].baggedWeight;
          dt["checked"]=true;
        }
        if(this.formdata3[arrstr[1]].checked2){
          if(this.formdata3[arrstr[1]].cartonPrice==null || this.formdata3[arrstr[1]].cartonPrice==''){
            this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata3[arrstr[1]].cartonWeight==null || this.formdata3[arrstr[1]].cartonWeight==''){
            this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata3[arrstr[1]].cartonNum==null || this.formdata3[arrstr[1]].cartonNum==''){
            this.$message.error("请填写完整");
           return false;
          }
          dt["cartonNum"] = this.formdata3[arrstr[1]].cartonNum;
          dt["cartonPrice"] = this.formdata3[arrstr[1]].cartonPrice;
          dt["cartonWeight"] = this.formdata3[arrstr[1]].cartonWeight;
          dt["checked2"]=true;
        }
        if(dt!={}){
          dt["vageId"] = arrstr[0];
          dt["batchCode"] = this.rowdata.batchCode;
          dt["vegetables"] = this.detailvageList[arrstr[1]].vegetables;
          dt["remark"] = this.formdata3[arrstr[1]].remark;
          insertdt.push(dt);
        }}
          var formdata=new FormData();
          formdata.append("batchform",JSON.stringify(this.batchform2));
          formdata.append("formdata",JSON.stringify(insertdt));
          addVagetables(formdata).then(res=>{
              console.log(res);
              if(res.data.code==200){
                this.$message.success("添加成功");
                this.batchform2=res.data.data;
                this.editBatch(this.batchform2);
                this.checkVge2=[];
              }else{
                this.$message.error(res.data.msg);
              }
           })
        },
        delvege(item){
          console.log(item);
          //移除品类
          this.$confirm('是否删除,该操作无法撤回').then((status)=>{
            delvegetables(item).then(res=>{
               if(res.data.code==200){
                 this.$message.success("删除成功,请更新其余数据");
                //  var arrdata=[];
                //  this.formdata2.forEach(res=>{
                //     if(res.batchDetailId != item.batchDetailId){
                //       arrdata.push(res);
                //     }
                //  })
                //  this.formdata2 = arrdata;
                 this.batchform2=res.data.data;
                 this.editBatch(this.batchform2);
               }else{
                this.$message.error(res.data.msg);
               }
            })
          })
        },
        uploadExcel(file){
          const extension = file.name.split(".")[1] === "xls";
          const extension2 = file.name.split(".")[1] === "xlsx";
          if (!extension && !extension2) {
            this.$message({
              message: "上传模板只能是 xls、xlsx格式!",
              type: "error",
            });
            return false;
          }
          var formdata = new FormData();
          formdata.append("file",file.raw);
          console.log(file.raw);
          uploadBatch(formdata).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.$message.success("导入成功");
              this.onload();
            }else{
              this.$message.error(res.data.msg);
            }
          })
        },
        takesell(item){
          //批次开售
          console.log(item);
          var obj = {
             "batchId":item.batchId,
             "batchCode":item.batchCode
          }
          takeSell(obj).then(res=>{
             console.log(res);
             if(res.data.code==200){
                this.$message.success("操作成功");
                this.onload(this.page,{});
             }else{
                this.$message.error(res.data.msg);
             }
          })
          
        },
        beforeUpload(file){
          console.log(file);
        },
        uploadFile(file){
           console.log(file);
        },
        filterMethod(query, item){
        },
        handleGet(){
          getEexcel().then(res=>{
            console.info(res);
        let blob = new Blob([res.data], {type:'application/octet-stream;charset=utf-8'});

        let downloadElement = document.createElement('a');
         
        const url = window.URL || window.webkitURL || window.moxURL;

        let href = url.createObjectURL(blob); //创建下载的链接 data:application/vnd.ms-excel;base64;charset=utf-8

        downloadElement.href = href;

        downloadElement.download = 'eee'+'.xlsx'; //下载后文件名

        // document.body.appendChild(downloadElement);

        downloadElement.click(); //点击下载

        //document.body.removeChild(downloadElement); //下载完成移除元素

        window.URL.revokeObjectURL(href); //释放掉blob对象

        //return true
          }) 
        },
        addBatch(){
          //查询空余未上架数据
          var params={
            "roleId":this.selectform.roleId,
            "userId":this.selectform.userId
          }
          getVagelist(null, null, Object.assign(params, this.query)).then(res => {
            this.loading = false;
            if(res.data.code==200){
              this.dialogFormVisible = true;
              res.data.data.data.forEach(elm=>{
                elm["isEdit"]=false;
                this.batchData.push(elm);
              })
            }
        });
        },
        sureaddBatch(){
          console.log(this.batchdetaildata);
          var params = {
            "userId":this.selectform.userId,
            "data":this.batchdetaildata
          }

            var insertdt=[];
            if(this.checkVge.length<=0){
              this.$message.error("请选择批次货");
              return false;
           }
           console.log(this.checkVge);
           for(var i=0;i<this.checkVge.length;i++){
              var dt={};
              var arrstr = this.checkVge[i].split("-");
              console.log(this.formdata[arrstr[1]]);
              if(!this.formdata[arrstr[1]].checked && !this.formdata[arrstr[1]].checked2){
                this.$message.error("请选择货物类型");
                return false;
              }
              if(this.formdata[arrstr[1]].checked){
                if(this.formdata[arrstr[1]].baggedPrice==0 || this.formdata[arrstr[1]].baggedWeight==0 || this.formdata[arrstr[1]].baggedNum==0){
                  this.$message.error("请填写有效数字");
                  return false;
           }
          if(this.formdata[arrstr[1]].baggedPrice==null || this.formdata[arrstr[1]].baggedPrice==''){
           this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata[arrstr[1]].baggedWeight==null || this.formdata[arrstr[1]].baggedWeight==''){
           this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata[arrstr[1]].baggedNum==null || this.formdata[arrstr[1]].baggedNum==''){
           this.$message.error("请填写完整");
           return false;
          }
          dt["baggedNum"] = this.formdata[arrstr[1]].baggedNum;
          dt["baggedPrice"] = this.formdata[arrstr[1]].baggedPrice;
          dt["baggedWeight"] = this.formdata[arrstr[1]].baggedWeight;
          dt["checked"] = true;
        }
        if(this.formdata[arrstr[1]].checked2){
          if(this.formdata[arrstr[1]].cartonPrice==0 || this.formdata[arrstr[1]].cartonWeight==0 || this.formdata[arrstr[1]].cartonNum==0){
                  this.$message.error("请填写有效数字");
                  return false;
           }
          if(this.formdata[arrstr[1]].cartonPrice==null || this.formdata[arrstr[1]].cartonPrice==''){
            this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata[arrstr[1]].cartonWeight==null || this.formdata[arrstr[1]].cartonWeight==''){
            this.$message.error("请填写完整");
           return false;
          }
          if(this.formdata[arrstr[1]].cartonNum==null || this.formdata[arrstr[1]].cartonNum==''){
            this.$message.error("请填写完整");
           return false;
          }
          dt["cartonNum"] = this.formdata[arrstr[1]].cartonNum;
          dt["cartonPrice"] = this.formdata[arrstr[1]].cartonPrice;
          dt["cartonWeight"] = this.formdata[arrstr[1]].cartonWeight;
          dt["checked2"] = true;
        }
        if(dt!={}){
          dt["vageId"] = arrstr[0];
          dt["remark"] = this.formdata[arrstr[1]].remark;
          insertdt.push(dt);
        }}
        if(this.batchform.batchNum==0 || this.batchform.batchWeight==0 || this.batchform.batchPrice==0){
                  this.$message.error("请填写有效数字");
                  return false;
           }
           if(this.batchform.batchNum==null || this.batchform.batchNum==''){
             this.$message.error("请填写完整");
             return false;
           }
           if(this.batchform.batchWeight==null || this.batchform.batchWeight==''){
            this.$message.error("请填写完整");
             return false;
           }
           if(this.batchform.batchPrice==null || this.batchform.batchPrice==''){
            this.$message.error("请填写完整");
             return false;
           }
           if(this.batchform.batchFare==null || this.batchform.batchFare==''){
            this.$message.error("请填写完整");
             return false;
           }
           if(this.batchform.batchPlace==null || this.batchform.batchPlace==''){
            this.$message.error("请填写完整");
             return false;
           }
           if(this.batchform.batchUserId==null || this.batchform.batchUserId==''){
            this.$message.error("请填写完整");
             return false;
           }
           var formdata=new FormData();
           this.batchform["roleId"]=this.selectform.roleId;
           this.batchform["userId"]=this.selectform.userId;
           formdata.append("batchform",JSON.stringify(this.batchform));
           formdata.append("formdata",JSON.stringify(insertdt));
           insertBatch(formdata).then(res=>{
              if(res.data.code==200){
                this.$message.success("添加成功");
                setTimeout(function(){
                  location.reload();
                },3000);
              }else{
                this.$message.error(res.data.msg);
              }
           })
        },
        vagelist(){
          this.formdata=[];
          var that = this;
          getVagelist(null,null,Object.assign(this.selectform, this.query)).then(res=>{
            console.log(res);
            var index = 0;
              res.data.data.data.forEach(element => {
                  this.formdata.push({
                     checked:false,
                     checked2:false,
                  })
                  that.batchformdata.push({
                    key:index++,
                    batchnum:0,
                    price:0,
                    checked:false
                  })
                  //index++;
              });
              this.vageList = res.data.data.data;
          })
          console.log(this.batchformdata);      
        },
        getusers(){
          getUser(3).then(res=>{
            res.data.data.forEach(elem=>{
                elem.id = parseInt(elem.id);
                this.users.push(elem);
            });
            console.log(this.users);
          })
        },
        searchChange(params, done){         
          //console.log(params);
          this.page.currentPage = 1;
          this.onload(this.page, params);
          done();
        },
          searchReset() {
          this.parentId = 0;
          this.onload(this.page);
        },
        currentChange(currentPage) {
        this.page.currentPage = currentPage;
        // this.onload();
      },
      sizeChange(pageSize) {
        console.log(pageSize);
        this.page.pageSize = pageSize;
        //this.onload();
      },

    }
}

</script>

<style>
.el-card{
  background-color: transparent;
}
.el-dialog__body{
  padding-top: 0 !important;
}
.shopcarmx{
    width: 80% !important;
    height: 50vh !important;
    overflow: hidden;
    overflow-y: auto;
}
.vagesbox{
  text-align: center;
  margin: 5px;
  cursor: pointer;
}
.vagesbox {
  background-color:white;
}
.checkbox{
  background-color:#409EFF !important;
  color: white;
}
.textbox{
  color: white;
}
.weightbox{
  color: red !important;
  font-weight: bold;
}
</style>